<template>
  <div class='nowplaying'>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset='50'
    >
      <FilmItem
        v-for='data in dataList'
        :key='data.filmId'
        :data='data'
        type='nowplaying'
      ></FilmItem>
    </van-list>
  </div>
</template>

<script>
import { instance } from '@/utils/http'
import FilmItem from '@/components/film-item'
import Vue from 'vue'
import { List } from 'vant'

Vue.use(List)
export default {
  components: {
    FilmItem
  },
  data() {
    return {
      dataList: [],
      loading: false,
      finished: false,
      pageNum: 1
    }
  },
  methods: {
    async onLoad() {
      const res = await instance.get('https://m.maizuo.com/gateway?cityId=310100&pageNum=' + this.pageNum + '&pageSize=10&type=1&k=7261332', {
        headers: {
          'X-Host': 'mall.film-ticket.film.list'
        }
      })
      this.dataList = this.dataList.concat(res.data.data.films)
      // 本次加载结束
      this.loading = false
      // 如果没有数据的话，需要将finished变成true,后续onLoad就不会再去执行
      if (this.pageNum * 10 >= res.data.data.total) {
        this.finished = true
      }
      // 让页码+1
      this.pageNum++
    }
  }
}
</script>

<style lang='scss' scoped>
  .nowplaying{
    padding:0.15rem;
  }
</style>
